<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>backbone版本的todos</title>
    <link rel="stylesheet" href="./css/bootstrap.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <style type="text/css">
        .operation_tip {
            display: none;
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            padding-top: 10px;
            text-align: center;
        }

        .operation_tip_inner {
            display: inline-block;
            vertical-align: middle;
            line-height: 20px;
            font-size: 14px;
            color: #fff;
            min-width: 150px;
            text-align: center;
            padding: 5px 40px;
            border-radius: 4px;
            box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: all .2s;
            transform-origin: 50% 50%;
            transform: scale(0.2, 0.2);
        }

        .operation_tip.in .operation_tip_inner {
            opacity: 1;
            transform: scale(1, 1);
        }

        .operation_tip.success .operation_tip_inner {
            background-color: #5FDE96;
        }

        .operation_tip.fail .operation_tip_inner {
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>Todos</h1>
    <hr>
    <div class="pl20 pr20">
        <div>
            <input id="new_input" class="form-control input-lg" type="text" placeholder="输入您要添加的待办">
        </div>
        <div class="checkbox hidden" id="complete_all">
            <label>
                <input type="checkbox"> 全部标记为已完成
            </label>
        </div>
    </div>
    <ul id="todos_list" class="pl20 pr20">
    </ul>
    <footer id="footer" class="clearfix hidden">
    </footer>

    <script id="todo_view_tpl" type="text/html">
        <label>
            <input type="checkbox" class="chk_complete" {{#complete}}checked="checked" {{/complete}}>
        </label>
        <span class="todo_text">{{text}}</span>
        <a href="javascript:;" class="remove pull-right"><span class="glyphicon glyphicon-remove"></span></a>
        <input class="form-control edit_input" type="text" value="{{text}}">
    </script>

    <script id="footer_tpl" type="text/html">
        <span class="pull-left">还有<span class="uncomplete_count">{{unComplete}}</span>个待办项未完成</span>
        <a class="pull-right btn btn-default btn-clear-all {{^complete}}hidden{{/complete}}" href="javascript:;">清除已经完成的<span
                class="complete_count">{{complete}}</span>项</a>
    </script>

    <script src="./js/jquery.js"></script>
    <script src="./js/underscore.js"></script>
    <script src="./js/backbone.js"></script>
    <script src="./js/backbone.localStorage.js"></script>
    <script src="./js/mustache.js"></script>
    <script src="./js/index.js"></script>
</div>
</body>
</html>